<template>
  <div class="communication">
    社区
    <div>猜你喜欢<i class="el-icon-lollipop"></i></div>
    <div class="interest">
      <el-card
        class="card-box"
        :body-style="{ padding: '0px' }"
        v-for="(item, index) in InterestTiltes"
        :key="index"
      >
        <div slot="header" class="clearfix">
          <span>{{ item }}</span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "社区",
      InterestTiltes: [
        "推荐",
        "前端常用技术",
        "流行框架",
        "常用问题",
        "技术讨论",
      ],
    };
  },
  activated() {
    this.$store.commit("addtags", {
      id: 3,
      path: this.$route.path,
      title: this.title,
    });
  },
};
</script>

<style scoped>
.interest {
  width: 100%;
  display: flex;
}

.card-box {
  width: 150px;
  height: 60px;
  line-height: 20px;
  cursor: pointer;
}

.clearfix {
  text-align: center;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
